<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>有奖答题平台</title>
	<!-- ICON -->
	<link href="/frame/images/meatball.ico" type="image/ico" rel="shortcut icon">
	<!-- CSS -->
	<link rel="stylesheet" href="/lib/layuiadmin/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/lib/layuiadmin/css/admin.css" media="all">
	<style>
		.ztree * {padding:0; margin:0; /*font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif*/}
		.ztree {margin:0; padding:5px; color:#333;}
		.ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:17px; color:#333; background-color: transparent;
			text-decoration:none; vertical-align:top; display: inline-block;font-size: 16px}
	</style>
</head>
<body>
<form class="layui-form layui-form-pane">
<div class="layui-fluid">
	<div class="layui-card">
		<div class="layui-card-body">
			<div class="layui-row" >
				<div class="layui-col-md3" >
					<!--<div class="layui-col-md3" >-->

					<!--</div>-->
					<div class="layui-row">
						<div class="layui-col-md12">
							<div class="layui-row">
								<div class="layui-col-md12">
									组织架构
								</div>
							</div>
						</div>
						<div class="layui-col-md12">
							<div class="meatball-tree-div_dept">
								<ul id="deptMenuTree" class="ztree"></ul>
							</div>
						</div>
					</div>

				</div>
				<div class="layui-col-md9">
					<div class="layui-row">
						<div class="layui-col-md12">
							<div class="layui-card" >
								<div class="layui-card-header" style="line-height: 40px;height: 40px">
										<div class="layui-row">
											<div class="layui-col-md12">
												<span id="deptid">&nbsp;</span>
											</div>
										</div>
								</div>
								<div class="layui-card-body" style="line-height: 40px;height: 40px">
									<span id="deptmemo"></span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
	<div id="rMenu" style="display: none;position: absolute;z-index: 9999;background-color: #cccccc">
		<ul>
			<li>
				<button class="layui-btn layui-btn-primary layui-btn-sm" id="addBtn" lay-submit lay-filter="addBtn">
					添加部门
				</button>
			</li>
			<li>
				<button class="layui-btn layui-btn-primary layui-btn-sm" id="editBtn">
					修改部门
				</button>
			</li>
			<li>
				<button class="layui-btn layui-btn-primary layui-btn-sm" id="delBtn" lay-submit lay-filter="delBtn">
					删除部门
				</button>
			</li>
		</ul>
	</div>
</form>
<form>
	<input type="hidden" name="pid_h" id="pid_h" value="">
	<input type="hidden" name="pidname_h" id="pidname_h" value="">
	<input type="hidden" name="istop_h" value="">
</form>
<!-- 新增 -->
<script type="text/html" id="addForm">
</script>
<!-- 编辑 -->
<script type="text/html" id="editForm">
</script>
<!-- JavaScript -->
<script type="text/javascript" src="/lib/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="/frame/js/DateUtil.js"></script>
<!--<script type="text/javascript" src="/lib/ztree/js/jquery.ztree.all.min.js"></script>-->
<!-- javascirpt -->
<!--<script th:inline="javascript">  -->
	<!--var deptMenuTree = [[${deptMenuTree}]];-->
<!--</script>-->
<script type="text/javascript" th:inline="none">
layui.config({
	base: '/lib/layuiadmin/' //静态资源所在路径
}).extend({
	index: 'lib/index', //主入口模块
}).use(['index', 'ztree', 'ztreecheck'], function() {
	var table = layui.table,
		form = layui.form,
		element = layui.element,
		laytpl = layui.laytpl,
        $ = layui.jquery,
        $addBtn = $('#addBtn'),
		ztree = layui.ztree;
        //监听工具条

    var setting = {
        async: {
            enable: true,
            type: "get",
            url: "/system/org/treelist"
        },
        check: {
            enable: false
            // chkStyle: "radio",
            // radioType: "all"
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        view: {
            remoteIcon: false,
            showIcon: true,
            nameIsHTML: true
        },
        callback: {
            // onCheck: zTreeOnCheck
            onRightClick : OnRightClick,
            onClick: zTreeOnClick,
            beforeAsync:function(){

			},
            onAsyncSuccess: function () {
                var treeObj = $.fn.zTree.getZTreeObj("deptMenuTree");
                var nodes = treeObj.getNodes();
                for (var i = 0; i < nodes.length; i++) { //设置节点展开
                    treeObj.expandNode(nodes[i], true, false, true);
                    if(i<1){
                        // alert(nodes[i].id+nodes[i].name+nodes[i].memo);
                        var node = treeObj.getNodeByParam("id",nodes[i].id);
                        treeObj.selectNode(node);
                        setValue(nodes[i]);
                    }
                }
            }
        }
    };

    function OnRightClick(event, treeId, treeNode) {
        // document.oncontextmenu=function () {
		// 	return false;
		// }
        var treeObj = $.fn.zTree.getZTreeObj("deptMenuTree");
        // if(treeNode == null) {
        //     var a = 1; // 什么都不做
        // }else if(treeNode && treeNode.name) {
        //     curName = treeNode.name;
        // }else {
        //     curName = undefined;
        // }
        if (!treeNode && event.target.tagName.toLowerCase() != "button"
            && $(event.target).parents("a").length == 0) {
            treeObj.cancelSelectedNode();
            showRMenu("root", event.clientX, event.clientY);
        } else if (treeNode && !treeNode.noR) {
            treeObj.selectNode(treeNode);
            if(treeNode.id) {
               setValue(treeNode);
            }
            showRMenu("node", event.clientX, event.clientY);
        }
    }
    // var rMenu =$("#rMenu");
    function showRMenu(type, x, y) {
        $("#rMenu").show();
        // if (type == "root") {
        //     $("#m_del").hide();
        //     $("#m_check").hide();
        //     $("#m_unCheck").hide();
        // } else {
        //     $("#m_del").show();
        //     $("#m_check").show();
        //     $("#m_unCheck").show();
        // }
        $("#rMenu").css({
            "top" : y + "px",
            "left" : x + "px",
            "display" : "block"
        });
        $("body").bind("mousedown", onBodyMouseDown);
    }
    function hideRMenu() {
        var rMenu=$("#rMenu");
        if (rMenu)
            rMenu.css({
                "display" : "none"
            });
        $("body").unbind("mousedown", onBodyMouseDown);
    }
    function onBodyMouseDown(event) {
        var rMenu=$("#rMenu");
        // alert(event.target.id+"===="+$(event.target).parents("#rMenu").length);
        if(event.target.id=='addBtn'){
             $("#addForm").html("<form class=\"layui-form layui-form-pane\">\n" +
                 "\t\t<input type=\"hidden\" name=\"pid\" id=\"pid\" value='"+$("#pid_h").val()+"'>\n" +
                 "\t\t<input type=\"hidden\" name=\"tenantid\" id=\"tenantid\">\n" +
                 "\t\t<div class=\"layui-card\">\n" +
                 "\t\t\t<div class=\"layui-card-body\">\n" +
                 "\t\t\t\t<div class=\"layui-form-item\">\n" +
                 "\t\t\t\t\t<label class=\"layui-form-label\">名称</label>\n" +
                 "\t\t\t\t\t<div class=\"layui-input-block\">\n" +
                 "\t\t\t\t\t\t<input type=\"text\" name=\"name\" autocomplete=\"off\" placeholder=\"请输入部门名称\" class=\"layui-input\" lay-verify=\"required\">\n" +
                 "\t\t\t\t\t</div>\n" +
                 "\t\t\t\t</div>\n" +
                 "\t\t\t\t<div class=\"layui-form-item\">\n" +
                 "\t\t\t\t\t    <label class=\"layui-form-label\">顶级部门</label>\n" +
                 "\t\t\t\t\t    <div class=\"layui-input\">\n" +
                 // "\t\t\t\t\t\t\t<div class=\"layui-inline\">\n" +
                 "\t\t\t\t\t\t\t\t<input type=\"checkbox\" name=\"istop\" lay-skin=\"switch\" lay-text=\"是|否\" />\n" +
                 // "\t\t\t\t\t\t\t</div>\n" +
                 "\t\t\t\t\t    </div>\n" +
                 "\t\t\t\t</div>\n" +
                 "\t\t\t\t<div class=\"layui-form-item\">\n" +
                 "\t\t\t\t\t<label class=\"layui-form-label\">备注</label>\n" +
                 "\t\t\t\t\t<div class=\"layui-input-block\">\n" +
                 "\t\t\t\t\t\t<textarea name=\"memo\" placeholder=\"请输入备注\" class=\"layui-textarea\"></textarea>\n" +
                 "\t\t\t\t\t</div>\n" +
                 "\t\t\t\t</div>\n" +
                 "\t\t\t\t<div class=\"layui-form-item\">\n" +
                 "\t\t\t\t\t<label class=\"layui-form-label\">上级部门</label>\n" +
                 "\t\t\t\t\t<div class=\"layui-input-block\">\n" +
                 "\t\t\t\t\t\t<input type=\"text\" name=\"pidname\" id=\"pidname\" autocomplete=\"off\" value='"+$("#pidname_h").val()+"' placeholder=\"请输入部门名称\" class=\"layui-input\" lay-verify=\"required\">\n" +
                 "\t\t\t\t\t</div>\n" +
                 "\t\t\t\t</div>\n" +
                 "\t\t\t\t<div class=\"layui-hide\">\n" +
                 "\t\t\t\t\t<input name=\"roleView\" value=\"0\">\n" +
                 "\t\t\t\t\t<button class=\"layui-btn submit\" lay-submit=\"\" lay-filter=\"add\">新增</button>\n" +
                 "\t\t\t\t\t<button class=\"layui-btn reset\" type=\"reset\">重置</button>\n" +
                 "\t\t\t\t</div>\n" +
                 "\t\t\t</div>\n" +
                 "\t\t</div>\n" +
                 "\t</form>");
            popupWin($(this).attr('title'), $("#addForm").html());
			layui.form.render();
            return false;
		}
        if(event.target.id=='delBtn'){
            if($("#pid_h").val()==''){
                layer.alert('请先选择部门！', {icon: 5});
                return false;
            }
            // if($('input[name=istop_h]').val()){
            //     layer.alert('顶级部门，不能删除！', {icon: 5});
            //     return false;
            // }
            layer.confirm('真的删除行么', {icon: 3}, function() {
                operate('DELETE', null, true);
            });
            return false;
        }
        if(event.target.id=='editBtn'){
            if($("#pid_h").val()==''){
                layer.alert('请先选择部门！', {icon: 5});
                return false;
            }
            $.ajaxSettings.async = false;
            $.get('/system/org/' + $("#pid_h").val(), function(res) {
                if(res.status == 403) {
                    layer.msg(res.message, {icon: 4});
                } else {
                    $("#editForm").html("<form class=\"layui-form layui-form-pane\">\n" +
                        "\t\t<input type=\"hidden\" name=\"id\" value=\""+res.id+"\">\n" +
                        "\t\t<input type=\"hidden\" name=\"pid\" id=\"pid\" value=\""+res.pid+"\">\n" +
                        "\t\t<input type=\"hidden\" name=\"tenantid\" id=\"tenantid\" value=\""+res.tenantid+"\">\n" +
                        "\t\t<div class=\"layui-card\">\n" +
                        "\t\t\t<div class=\"layui-card-body\">\n" +
                        "\t\t\t\t<div class=\"layui-form-item\">\n" +
                        "\t\t\t\t\t<label class=\"layui-form-label\">名称</label>\n" +
                        "\t\t\t\t\t<div class=\"layui-input-block\">\n" +
                        "\t\t\t\t\t\t<input type=\"text\" name=\"name\" value=\""+res.name+"\" autocomplete=\"off\" placeholder=\"请输入部门名称\" class=\"layui-input\" lay-verify=\"required\">\n" +
                        "\t\t\t\t\t</div>\n" +
                        "\t\t\t\t</div>\n" +
                        "\t\t\t\t<div class=\"layui-form-item\">\n" +
                        "\t\t\t\t\t<div class=\"layui-inline\">\n" +
                        "\t\t\t\t\t\t<label class=\"layui-form-label\">是否展开</label>\n" +
                        "\t\t\t\t\t\t<div class=\"layui-input-block\">\n" +
                        "\t\t\t\t\t\t\t<input type=\"checkbox\" name=\"istop\" lay-skin=\"switch\" lay-text=\"是|否\">\n" +
                        "\t\t\t\t\t\t</div>\n" +
                        "\t\t\t\t\t</div>\n" +
                        "\t\t\t\t</div>\n" +
                        "\t\t\t\t<div class=\"layui-form-item\">\n" +
                        "\t\t\t\t\t<label class=\"layui-form-label\">备注</label>\n" +
                        "\t\t\t\t\t<div class=\"layui-input-block\">\n" +
                        "\t\t\t\t\t\t<textarea name=\"memo\" placeholder=\"请输入备注\" class=\"layui-textarea\">"+res.memo+"</textarea>\n" +
                        "\t\t\t\t\t</div>\n" +
                        "\t\t\t\t</div>\n" +
                        "\t\t\t\t<div class=\"layui-form-item\">\n" +
                        "\t\t\t\t\t<label class=\"layui-form-label\">上级部门</label>\n" +
                        "\t\t\t\t\t<div class=\"layui-input-block\">\n" +
                        "\t\t\t\t\t\t<input type=\"text\" name=\"pidname\" id=\"pidname\" autocomplete=\"off\" value='"+$("#pidname_h").val()+"' placeholder=\"请输入部门名称\" class=\"layui-input\" lay-verify=\"required\">\n" +
                        "\t\t\t\t\t</div>\n" +
                        "\t\t\t\t</div>\n" +
                        "\t\t\t\t<div class=\"layui-hide\">\n" +
                        "\t\t\t\t\t<input name=\"roleView\" value=\"0\">\n" +
                        "\t\t\t\t\t<button class=\"layui-btn submit\" lay-submit=\"\" lay-filter=\"update\">新增</button>\n" +
                        "\t\t\t\t\t<button class=\"layui-btn reset\" type=\"reset\">重置</button>\n" +
                        "\t\t\t\t</div>\n" +
                        "\t\t\t</div>\n" +
                        "\t\t</div>\n" +
                        "\t</form>");
                    	// alert($("#editForm").html());
                        popupWin("修改", $("#editForm").html());
                    	layui.form.render();
                    // return false;
                }
                // return false;
            });
            return false;
        }
        if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
            rMenu.css({
                "display" : "none"
            });
        }
        hideRMenu();
    }
    function setValue(obj) {
        $("#pid_h").val(obj.id);
        $("#pidname_h").val(obj.name);
        $("#deptid").html(obj.name+"（"+obj.id+"）");
        $('input[name=istop_h]').val(obj.istop);
        $("#deptmemo").html("<span style='color: red;font-size: 15px'>"+obj.memo+"</span>");
    }
	// 渲染下拉树
	function zTreeOnClick(event, treeId, treeNode) {
        setValue(treeNode);
        // renderTable(treeNode.id);
    }
	// function zTreeOnCheck(event, treeId, treeNode) {
	// 	var treeObj = $.fn.zTree.getZTreeObj("deptMenuTree");
	// }
	// 渲染下拉树
	function renderTree() {
        ztree.init($("#deptMenuTree"), setting);
        var treeObj = $.fn.zTree.getZTreeObj("deptMenuTree");
        var nodes = treeObj.getNodes();
        for (var i = 0; i < nodes.length; i++) { //设置节点展开
            treeObj.expandNode(nodes[i], true, true, true);
        }
	}
    // 新增提交
    form.on('submit(add)', function(data) {
        if($("#pid").val()==''){
            layer.alert('请选择上级单位！', {icon: 5});
            return false;
		}
        operate('POST', data.field, true);
        return false;
    })
    // 更新
    form.on('submit(update)', function(data) {
        if($("#pid").val()==''){
            layer.alert('请选择上级单位！', {icon: 5});
            return false;
        }
        if($("#pid").val()==$('form input[name=id]').val()){
            layer.alert('部门不能同级！', {icon: 5});
            return false;
		}
        // var $form = $(this).parents('form');
        operate('PUT', data.field, true);
        return false;
    })
    $(function(){
        renderTree();
    });
    //渲染弹框
    function popupWin(title, content) {
        layerIndex = layer.open({
            type: 1, //Page层类型
            area: '700px', //['700px', '480'],
            maxWidth: 1000,
            maxHeight: 700,
            title: title,
            shade: 0.1, //遮罩透明度
            skin: 'layui-layer-rim', //加上边框
            maxmin: false, //允许全屏最小化
            anim: 0, //0-6的动画形式，-1不开启
            scrollbar: false, //禁用滚动
            content: content,
            btn: ['<i class="layui-icon layui-icon-ok"></i> 提交', '<i class="layui-icon layui-icon-refresh-1"></i> 重置'],
            btn1: function(index, layero) {
                layero.find('form .submit').trigger('click');
                return false;
            },
            btn2: function(index, layero) {
                layero.find('form .reset').trigger('click');
                return false;
            }
        });
    }
    function operate(ajaxType, data, refresh, delRow) {
        var url = '/system/org/';
        if(ajaxType == 'DELETE') {
            url = '/system/org/del/' + $("#pid_h").val();
        }
        $.ajax({
            url: url,
            type: ajaxType,
            async: true,
            data: data,
            success: function(res) {
                if(res.code == 10000) {
                    if(refresh) {
                        renderTree();
                    }
                    if(ajaxType != 'DELETE') {
                        layer.close(layerIndex);
                    }
                    layer.msg(res.message, {icon: 1});
                } else if(res.code == 10003) {
                    layer.msg(res.message, {icon: 4});
                } else {
                    layer.msg(res.message, {icon: 5});
                }
            }
        })
    }
});
</script>
</body>
</html>